<template>
	<a-input-password v-if="type === 'password'" v-model:value='value' :placeholder='p'  @input='onInput' :disabled='disabled' :style='resultStyle' size='small' autocomplete='new-password' >
		<template #prefix>
			<img v-if='imgIcon' :style='{width:iconSize}' :src='imgIcon'>
			<i v-if='icon' :style='{width:iconSize}' :class='icon' class='fxmc'></i>
		</template>
	</a-input-password>
	
	<a-textarea v-else-if="type === 'textarea'" v-model:value='value' :placeholder="readOnly ? '--' : p" :allowClear='allowClear' @input='onInput' :disabled='disabled' :rows='rows' size='small'/>
	
	<a-input-number v-else-if="type === 'number'" v-model:value='value' :placeholder='p' @change='onChange' :min='min' :max='max' :step='step' :disabled='disabled' :style='resultStyle' size='small'/>
	
	<a-input-search v-else-if="type === 'search'" v-model:value='value' :placeholder='p' @input='onInput' :allowClear='allowClear' :disabled='disabled'  :style='resultStyle' size='small'/>
	
	<a-input v-else v-model:value='value' :placeholder="readOnly ? '--' : p" @input='onInput' @blur='onBlur' :allowClear='readOnly ? false : allowClear' :maxlength='max' :readOnly='readOnly' :disabled='disabled' :style='resultStyle' size='small'>
		<template #prefix>
			<img v-if='imgIcon' :style='{width:iconSize}' :src='imgIcon'>
			<i v-if='icon' :style='{width:iconSize}' :class='icon' class='fxmc'></i>
		</template>
		<template #suffix></template> 
	</a-input>
</template>

<script>
	import { ref, watch } from 'vue'
	import { Input, InputNumber } from 'ant-design-vue'
	app.use(Input)
	app.use(InputNumber)
	export default{
		props:{
			value 		: [ String, Number ],
			money 		: [ Number, Boolean ],
			name 		: String,
			label 		: String,
			form 		: Object,
			p			: { type:String },
			imgIcon		: null,
			icon		: null,
			iconSize 	: { type:String, default: '15px'},
			size		: { type:[String, Number], default: 'small'},
			allowClear  : { type:Boolean, default:({ readOnly }) => !readOnly},
			type 		: String,
			min 		: { type:Number, default:0 },
			max 		: Number,
			step 		: { type:Number, default:1 },
			readOnly 	: Boolean,
			disabled 	: Boolean,
			rows		: { type:Number, default: 4 },
			width 		: [String, Number ],
			style 		: Object,
		},
		emits:{
			change:null,
			blur:null,
			input:null,
			'update:value':null
		},
		setup(props, ctx){
			const { size, type, width, style } = props
			const modelValue = ref(props.value)
			
			const resultStyle = ref(style)
			
			const sizeStyle = $fn.isNumber(size) ? {height:size + 'px'} : $config.antd.btnSize[size]
			let elStyle = {padding:'0 8px', ...sizeStyle}
			
			if( type === 'textarea' ){
				elStyle = {}
			}else if( type === 'number' ){
				elStyle = {width:'100%', ...sizeStyle}
			}
			resultStyle.value = { width:$.setPx(width), ...elStyle, ...style }
			
			return {
				modelValue,
				resultStyle,
				onInput : event => {
					let { value } = event.target
					ctx.emit('update:value', value)
					ctx.emit('input', value)
					ctx.emit('change', $fn.getFormFormat({...props, formType:'text' }))
				},
				onChange: value => {
					ctx.emit('update:value', value)
					ctx.emit('change', $fn.getFormFormat({...props, formType:'text' }))
				},
				onBlur: event => {
					if(props.money){ 
						let { value } = event.target
						value = $fn.getMoney(value)
						modelValue.value = value
						ctx.emit('update:value', value)
						ctx.emit('change', $fn.getFormFormat({...props, formType:'text' }))
					}
				}
			}
		}
	}
</script>